<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS网格线,田字格</title>
        <style>
            body,
            html {
                position: relative;

                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

                overflow: hidden;
            }
            .text-style {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                padding: 12px 20px;

                background-color: #ffffff;
                font-size: 22px;
                font-weight: bold;
                letter-spacing: 2px;
            }

            /* 具体CSS样式部分 */
            :root {
                --gridColor: #888888;
                /* --gridColor: #000000; */
                --gridDottedLine: 20px;
                --gridSolidLine: 60px;
            }
            .dotted-line {
                position: fixed;

                width: 100%;
                height: 100%;
                transform: scale(1.1);

                overflow: hidden;
                z-index: -4;
            }
            .dotted-line::before,
            .dotted-line::after {
                position: absolute;
                top: 0;
                left: 0;

                width: 100%;
                height: 100%;

                opacity: 0.8;
                content: "";
            }
            .dotted-line::before {
                background: linear-gradient(
                        to right,
                        white 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        to bottom,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    );
                background-size: 4px var(--gridDottedLine);
            }
            .dotted-line::after {
                background: linear-gradient(
                        to bottom,
                        white 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        to right,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    );
                background-size: var(--gridDottedLine) 4px;
            }

            .solid-line {
                position: fixed;

                width: 100%;
                height: 100%;
                transform: scale(1.1);

                overflow: hidden;
                z-index: -2;
                background: linear-gradient(
                        to right,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    ),
                    linear-gradient(
                        to bottom,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    );
                background-size: var(--gridSolidLine) var(--gridSolidLine);
            }
        </style>
    </head>
    <body>
        <div class="dotted-line"></div>
        <div class="solid-line"></div>

        <div class="text-style">田字网格线（外实内虚）</div>
    </body>
</html>
